<template>
	<view class="wrap savepadding">
		<u-tabbar :active-color="activeColor" :inactive-color="inactiveColor" :value="tab" fixed placeholder
			safe-area-inset-bottom v-if="loading">
			<u-tabbar-item text="loading...">
				<u-loading-icon slot="active-icon" />
				<u-loading-icon slot="inactive-icon" />
			</u-tabbar-item>
		</u-tabbar>
		<u-tabbar :active-color="activeColor" :inactive-color="inactiveColor" :value="tab" fixed placeholder
			safe-area-inset-bottom v-else>
			<u-tabbar-item v-for="(item, index) in tabs" :key="index" :text="item.text" @click="onClick(item.link)">
				<image style="width: 39rpx; height: 37rpx;" slot="active-icon" :src="item.activeIcon" />
				<image style="width: 39rpx; height: 37rpx;" slot="inactive-icon" :src="item.inactiveIcon" />
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: {
			tab: {
				type: Number,
				default: 0
			},
			// 可以将样式作为属性传递
			activeColor: {
				type: String,
				default: '#1573FF'
			},
			inactiveColor: {
				type: String,
				default: '#B6B6B6'
			}
		},
		data() {
			return {
				loading: true,
				list: [{
						text: '工作台',
						link: '/pages/home/home',
						activeIcon: '/static/tabBar/tabBar_home_selected.png',
						inactiveIcon: '/static/tabBar/tabBar_home_default.png',
					},
					{
						text: '营销管理',
						link: '/pages/activity/activity',
						activeIcon: '/static/tabBar/tabBar_activity_selected.png',
						inactiveIcon: '/static/tabBar/tabBar_activity_default.png',
					},
					{
						text: '订单管理',
						link: '/pages/order/order',
						activeIcon: '/static/tabBar/tabBar_order_selected.png',
						inactiveIcon: '/static/tabBar/tabBar_order_default.png',
					},
					{
						text: '车辆管理',
						link: '/pages/car/car',
						activeIcon: '/static/tabBar/tabBar_car_selected.png',
						inactiveIcon: '/static/tabBar/tabBar_car_default.png',
					},
				],
			};
		},
		computed: {
			navigationList() {
				return this.$store.state.initData.initData.navigationList;
			},
			// 通过计算属性直接创建tabs
			tabs() {
				let tabs= this.navigationList?.map(item => {
					const found = this.list.find(tab => tab.text === item.name);
					return found || {};
				}).filter(tab => tab.text);
				console.log('tabs', tabs);
				return tabs;
			},
		},
		mounted() {
			this.loading = false;
		},
		methods: {
			// onClick路径由调用时确定
			onClick(path) {
				uni.switchTab({
					url: path
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		z-index: 100;
	}
</style>